<section class="section">
  <h2>Buttons</h2>
  <div>
    <div class="flex">
      <p>
        <span>Button</span><br />
        <button>Button</button>
      </p>
      <p>
        <span>Disabled button</span><br />
        <button disabled>Disabled Button</button>
      </p>
    </div>
    <div class="flex">
      <p>
        <label for="input-reset">Input type="reset"</label><br />
        <input type="reset" id="input-reset" value="Input Reset" />
      </p>
      <p>
        <label for="input-reset-disabled">Input type="reset"</label><br />
        <input type="reset" id="input-reset-disabled" value="Disabled Input Reset" disabled />
      </p>
    </div>
    <div class="flex">
      <p>
        <label for="input-button">Input type="button"</label><br />
        <input type="button" id="input-button" value="Input Button" />
      </p>
      <p>
        <label for="input-button">Input type="button"</label><br />
        <input type="button" id="input-button" value="Disabled Input Button"  disabled />
      </p>
    </div>
    <div class="flex">
      <p>
        <label for="input-submit">Input type="submit"</label><br />
        <input type="submit" id="input-submit" value="Input Submit" />
      </p>
      <p>
        <label for="input-submit">Input type="submit"</label><br />
        <input type="submit" id="input-submit" value="Disabled Input Submit" disabled />
      </p>
    </div>
    <p>
      <label for="input-image">Input type="image"</label><br />
      <input type="image" id="input-image" alt="Input" src="./static/input-image.png" />
    </p>
  </div>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;div class="flex"&gt;
  &lt;p&gt;
    &lt;span&gt;Button&lt;/span&gt;&lt;br /&gt;
    &lt;button&gt;Button&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span&gt;Disabled button&lt;/span&gt;&lt;br /&gt;
    &lt;button disabled&gt;Disabled Button&lt;/button&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;div class="flex"&gt;
  &lt;p&gt;
    &lt;label for="input-reset"&gt;Input type="reset"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="reset" id="input-reset" value="Input Reset" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-reset-disabled"&gt;Input type="reset"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="reset" id="input-reset-disabled" value="Disabled Input Reset" disabled /&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;div class="flex"&gt;
  &lt;p&gt;
    &lt;label for="input-button"&gt;Input type="button"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="button" id="input-button" value="Input Button" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-button"&gt;Input type="button"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="button" id="input-button" value="Disabled Input Button"  disabled /&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;div class="flex"&gt;
  &lt;p&gt;
    &lt;label for="input-submit"&gt;Input type="submit"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="submit" id="input-submit" value="Input Submit" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="input-submit"&gt;Input type="submit"&lt;/label&gt;&lt;br /&gt;
    &lt;input type="submit" id="input-submit" value="Disabled Input Submit" disabled /&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;
  &lt;label for="input-image"&gt;Input type="image"&lt;/label&gt;&lt;br /&gt;
  &lt;input type="image" id="input-image" alt="Input" src="./static/input-image.png" /&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>